<template>
  <div id="head">
    <div class="head">
      <div class="logo">
        <router-link to='/'>DATX</router-link>
      </div>
      <div style="flex:1;"></div>
      <div class="tab">
        <router-link to='/'>{{$t("m.home")}}</router-link>
        <router-link to='/transaction'>{{$t("m.tran")}}</router-link>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {}
    },
  }
</script>
<style lang="less" scoped>
  #head {
    background: #333;
    .head {
      width: 1200px;
      margin: 0 auto;
      height: 75px;
      display: flex;
      align-items: center;
      .logo a{
        font-size: 40px;
        color: #fff;
      }
      .tab {
        a {
          display: inline-block;
          height: 75px;
          line-height: 75px;
          width: 180px;
          text-align: center;
          color: #fff;
        }
        .router-link-exact-active {
          background: rgba(255, 255, 255, 0.1);
          border-bottom: 3px solid #bfbcbc;
        }

      }
    }
  }
</style>

